<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Popover from "./Popover.svelte";
    import { fn } from "storybook/test";
    import type { PopoverProps } from "./Popover";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import { BothSide } from "../BothSide";
    import { Text } from "../Typography";
    import Icon from "@iconify/svelte";

    const { Story } = defineMeta({
        title: "Components/Base/Popover",
        component: Popover,
        tags: ["autodocs"],
        argTypes: {
            align: {
                control: { type: "select" },
                options: ["top", "bottom", "left", "right", "topLeft", "topRight", "bottomLeft", "bottomRight", "leftTop", "leftBottom", "rightTop", "rightBottom"],
            },
            trigger: {
                control: { type: "select" },
                options: ["hover", "click", "focus"],
            },
            disabled: {
                control: { type: "boolean" },
            },
            arrow: {
                control: { type: "boolean" },
            },
            hideDelay: {
                control: { type: "number" },
            },
            onvisiblechange: {
                table: {
                    type: { summary: "(open: boolean) => void" },
                },
            },
            content: {
                table: {
                    type: { summary: "string | Snippet" },
                },
            },
            contentStyle: {
                control: { type: "text" },
            },
            visible: {
                control: { type: "boolean" },
            },
            theme: {
                control: { type: "select" },
                options: [
                    "light",
                    "primary",
                    "success",
                    "info",
                    "warning",
                    "error",
                    "blue",
                    "green",
                    "red",
                    "yellow",
                    "pink",
                    "magenta",
                    "volcano",
                    "orange",
                    "gold",
                    "lime",
                    "cyan",
                    "geekblue",
                    "purple",
                ],
                table: {
                    type: {
                        summary:
                            "string | light | primary | success | info | warning | error | blue | green | red | yellow | pink | magenta | volcano | orange | gold | lime | cyan | geekblue | purple",
                    },
                    defaultValue: { summary: "light" },
                },
            },
            title: {
                table: {
                    type: { summary: "string | Snippet" },
                },
            },
            offset: {
                control: { type: "number" },
            },
            arrowPointAtCenter: {
                control: { type: "boolean" },
            },
        },
        args: {},
    });

    const style = "width: 120px; text-align: center";
    let visible = $state(false);
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space dir="v" size={24}>
            <div>
                <Popover title="Title" content="hover Content">
                    <Button>Hover me</Button>
                </Popover>
            </div>
            <div>
                <Popover title="Title" content="click Content" trigger="click">
                    <Button>Click me</Button>
                </Popover>
            </div>
            <div>
                <Popover content="focus Content" trigger="focus" title="Title">
                    <Button>Focus me</Button>
                </Popover>
            </div>
        </Space>
    {/snippet}
</Story>

<Story name="Align">
    {#snippet template(args)}
        <Space justify="center">
            <Space dir="v" style="width: 500px">
                <Space dir="h" align="center" justify="center" size={30}>
                    <Popover content="Content" align="topLeft" arrow>
                        <Button {style}>Top Left</Button>
                    </Popover>
                    <Popover content="Content" align="top" arrow>
                        <Button {style}>Top Center</Button>
                    </Popover>
                    <Popover content="Content" align="topRight" arrow>
                        <Button {style}>Top Right</Button>
                    </Popover>
                </Space>
                <BothSide>
                    <Space dir="v">
                        <Popover content="Content" align="leftTop" arrow>
                            <Button>Left Top</Button>
                        </Popover>
                        <Popover content="Content" align="left" arrow>
                            <Button>Left Center</Button>
                        </Popover>
                        <Popover content="Content" align="leftBottom" arrow>
                            <Button>Left Bottom</Button>
                        </Popover>
                    </Space>
                    <Space dir="v">
                        <Popover content="Content" align="rightTop" arrow>
                            <Button>Right Top</Button>
                        </Popover>
                        <Popover content="Content" align="right" arrow>
                            <Button>Right Center</Button>
                        </Popover>
                        <Popover content="Content" align="rightBottom" arrow>
                            <Button>Right Bottom</Button>
                        </Popover>
                    </Space>
                </BothSide>
                <Space dir="h" align="center" justify="center" size={30}>
                    <Popover content="Content" align="bottomLeft" arrow>
                        <Button {style}>Bottom Left</Button>
                    </Popover>
                    <Popover content="Content" align="bottom" arrow>
                        <Button {style}>Bottom Center</Button>
                    </Popover>
                    <Popover content="Content" align="bottomRight" arrow>
                        <Button {style}>Bottom Right</Button>
                    </Popover>
                </Space>
            </Space>
        </Space>
    {/snippet}
</Story>

<Story name="Control" args={{ disabled: true }}>
    {#snippet template(args)}
        <Space dir="v" size={24}>
            <div>
                <Popover theme="light" bind:visible align="rightTop" title="Title" arrow trigger="click">
                    {#snippet content()}
                        <div>
                            <div>content!content!content!</div>
                            <div>content!content!content!</div>
                            <div>content!content!content!</div>
                            <div>content!content!content!</div>
                            <Button
                                theme="borderless"
                                size="small"
                                onclick={() => {
                                    visible = false;
                                }}>Close</Button
                            >
                        </div>
                    {/snippet}
                    <Button>Click me</Button>
                </Popover>
            </div>
            <div>
                <Popover
                    theme="light"
                    align="rightTop"
                    arrow
                    confirm
                    onok={() => {
                        return new Promise((resolve) => {
                            setTimeout(() => {
                                resolve(true);
                            }, 2000);
                        });
                    }}
                >
                    {#snippet title()}
                        <Space align="center">
                            <Icon icon="ion:home" color="var(--cui-color-warning)" />
                            <Text>确认用户信息</Text>
                        </Space>
                    {/snippet}
                    {#snippet content()}
                        <Space dir="v" style="width: 150px">
                            <div>是否确认删除该信息</div>
                        </Space>
                    {/snippet}
                    <Button type="primary">删除选项?</Button>
                </Popover>
            </div>
        </Space>
    {/snippet}
</Story>

<Story name="ArrowCenter">
    {#snippet template(args)}
        <Space justify="center">
            <Space dir="v" style="width: 500px">
                <Space dir="h" align="center" justify="center" size={30}>
                    <Popover content="Content" arrowPointAtCenter align="topLeft" arrow>
                        <Button {style}>Top Left</Button>
                    </Popover>
                    <Popover content="Content" arrowPointAtCenter align="top" arrow>
                        <Button {style}>Top Center</Button>
                    </Popover>
                    <Popover content="Content" arrowPointAtCenter align="topRight" arrow>
                        <Button {style}>Top Right</Button>
                    </Popover>
                </Space>
                <BothSide>
                    <Space dir="v">
                        <Popover content="Content" arrowPointAtCenter align="leftTop" arrow>
                            <Button>Left Top</Button>
                        </Popover>
                        <Popover content="Content" arrowPointAtCenter align="left" arrow>
                            <Button>Left Center</Button>
                        </Popover>
                        <Popover content="Content" arrowPointAtCenter align="leftBottom" arrow>
                            <Button>Left Bottom</Button>
                        </Popover>
                    </Space>
                    <Space dir="v">
                        <Popover content="Content" arrowPointAtCenter align="rightTop" arrow>
                            <Button>Right Top</Button>
                        </Popover>
                        <Popover content="Content" arrowPointAtCenter align="right" arrow>
                            <Button>Right Center</Button>
                        </Popover>
                        <Popover content="Content" arrowPointAtCenter align="rightBottom" arrow>
                            <Button>Right Bottom</Button>
                        </Popover>
                    </Space>
                </BothSide>
                <Space dir="h" align="center" justify="center" size={30}>
                    <Popover content="Content" arrowPointAtCenter align="bottomLeft" arrow>
                        <Button {style}>Bottom Left</Button>
                    </Popover>
                    <Popover content="Content" arrowPointAtCenter align="bottom" arrow>
                        <Button {style}>Bottom Center</Button>
                    </Popover>
                    <Popover content="Content" arrowPointAtCenter align="bottomRight" arrow>
                        <Button {style}>Bottom Right</Button>
                    </Popover>
                </Space>
            </Space>
        </Space>
    {/snippet}
</Story>

<Story name="Theme">
    {#snippet template(args)}
        <Space dir="v" size={24}>
            <Space wrap>
                {#each ["light", "primary", "success", "info", "warning", "error", "blue", "green", "red", "yellow", "magenta", "pink", "volcano", "orange", "gold", "lime", "cyan", "geekblue", "purple"] as color}
                    <Popover align="top" theme={color} arrow content={color}>
                        <Button>{color}</Button>
                    </Popover>
                {/each}
            </Space>

            <Space>
                {#each ["#f50", "#2db7f5", "#87d068", "#108ee9"] as color}
                    <Popover align="top" trigger="click" theme={color} arrow content={color}>
                        <Button>{color}</Button>
                    </Popover>
                {/each}
            </Space>
        </Space>
    {/snippet}
</Story>
